import { Header } from '../components/Header';
import { Footer } from '../components/Footer';
import { ImageWithLoading } from '../components/ImageWithLoading';
import { ChevronRight, Calendar, Clock, Share2, List, ExternalLink } from 'lucide-react';

export const BuyingGuideDetailPage = () => {
  // Mock buying guide data
  const guide = {
    id: 'choosing-blood-pressure-monitor-2025',
    title: 'How to Choose the Best Blood Pressure Monitor (2025 Guide)',
    author: 'Dr. Emily Chen',
    date: 'May 15, 2025',
    readTime: '15 min read',
    category: 'Heart Health',
    heroImage: 'https://picsum.photos/1600/900?random=bp-guide-hero',
    summary: 'This comprehensive guide will help you understand the different types of blood pressure monitors available in 2025, what features to look for, and how to choose the right one for your specific needs.',
    tableOfContents: [{
      id: 'why-monitor',
      title: 'Why Monitor Blood Pressure at Home?'
    }, {
      id: 'types-of-monitors',
      title: 'Types of Blood Pressure Monitors'
    }, {
      id: 'key-features',
      title: 'Key Features to Consider'
    }, {
      id: 'accuracy-validation',
      title: 'Accuracy and Validation'
    }, {
      id: 'smart-features',
      title: 'Smart Features and Connectivity'
    }, {
      id: 'recommendations',
      title: 'Our Top Recommendations'
    }],
    content: [{
      type: 'heading',
      level: 2,
      id: 'why-monitor',
      content: 'Why Monitor Blood Pressure at Home?'
    }, {
      type: 'paragraph',
      content: 'Home blood pressure monitoring is becoming increasingly important in managing cardiovascular health. Regular monitoring allows you to track trends, assess the effectiveness of medications, and detect potential issues early.'
    }, {
      type: 'list',
      items: ['Track blood pressure trends over time', 'Monitor medication effectiveness', 'Detect white coat hypertension', 'Provide data to healthcare providers', 'Early detection of blood pressure changes']
    }, {
      type: 'heading',
      level: 2,
      id: 'types-of-monitors',
      content: 'Types of Blood Pressure Monitors'
    }, {
      type: 'paragraph',
      content: 'There are three main types of blood pressure monitors available for home use, each with its own advantages and considerations.'
    }, {
      type: 'heading',
      level: 3,
      content: 'Upper Arm Monitors (Recommended)'
    }, {
      type: 'paragraph',
      content: 'Upper arm monitors are generally considered the most accurate for home use. They position the cuff at heart level when you\'re seated properly, which provides the most reliable readings.'
    }, {
      type: 'heading',
      level: 3,
      content: 'Wrist Monitors'
    }, {
      type: 'paragraph',
      content: 'Wrist monitors are more portable and easier to use, but they require precise positioning at heart level to ensure accuracy. They\'re best for people who have difficulty with upper arm cuffs.'
    }, {
      type: 'heading',
      level: 3,
      content: 'Finger Monitors'
    }, {
      type: 'paragraph',
      content: 'Finger monitors are the least accurate and are generally not recommended for regular monitoring. They can be useful for quick checks but shouldn\'t replace proper monitoring devices.'
    }, {
      type: 'heading',
      level: 2,
      id: 'key-features',
      content: 'Key Features to Consider'
    }, {
      type: 'paragraph',
      content: 'When choosing a blood pressure monitor, several key features can significantly impact your experience and the accuracy of your readings.'
    }, {
      type: 'heading',
      level: 3,
      content: 'Cuff Size and Fit'
    }, {
      type: 'paragraph',
      content: 'Proper cuff size is critical for accurate readings. Most monitors come with a standard cuff that fits arm circumferences of 9-14 inches. If your arm is outside this range, you\'ll need a different cuff size.'
    }, {
      type: 'heading',
      level: 3,
      content: 'Display and Readability'
    }, {
      type: 'paragraph',
      content: 'Look for monitors with large, clear displays that are easy to read. Backlit displays can be helpful in low-light conditions. Some monitors also provide color-coded readings to help interpret results.'
    }, {
      type: 'heading',
      level: 3,
      content: 'Memory and Data Storage'
    }, {
      type: 'paragraph',
      content: 'Most modern monitors can store multiple readings with timestamps. This feature is valuable for tracking trends and sharing data with healthcare providers.'
    }, {
      type: 'heading',
      level: 2,
      id: 'accuracy-validation',
      content: 'Accuracy and Validation'
    }, {
      type: 'paragraph',
      content: 'Look for monitors that have been validated by recognized organizations such as the British Hypertension Society (BHS) or the Association for the Advancement of Medical Instrumentation (AAMI).'
    }, {
      type: 'heading',
      level: 2,
      id: 'smart-features',
      content: 'Smart Features and Connectivity'
    }, {
      type: 'paragraph',
      content: 'Modern blood pressure monitors often include smart features like Bluetooth connectivity, smartphone apps, and integration with health platforms. These features can help you track your readings over time and share data with healthcare providers.'
    }, {
      type: 'paragraph',
      content: "While these features can be convenient, they're not necessary for everyone. If you're comfortable manually recording your readings or if you prefer simplicity, a basic model without connectivity features may be sufficient."
    }],
    recommendedProducts: [{
      name: 'Omron Platinum Blood Pressure Monitor',
      image: 'https://picsum.photos/600/400?random=omron-platinum-guide',
      price: 89.99,
      description: 'Best overall choice with excellent accuracy and smart features',
      link: '/product/omron-platinum-bp-monitor'
    }, {
      name: 'Beurer BM55 Upper Arm Monitor',
      image: 'https://picsum.photos/600/400?random=beurer-bm55-guide',
      price: 69.99,
      description: 'Best value option with reliable performance at a lower price point',
      link: '/product/beurer-bm55-monitor'
    }],
    relatedGuides: [{
      title: 'Understanding Blood Pressure Numbers',
      link: '/buying-guides/understanding-blood-pressure-numbers',
      readTime: '8 min read'
    }, {
      title: 'Managing Hypertension at Home',
      link: '/buying-guides/managing-hypertension-at-home',
      readTime: '12 min read'
    }, {
      title: 'Best Heart Rate Monitors of 2025',
      link: '/buying-guides/best-heart-rate-monitors-2025',
      readTime: '10 min read'
    }]
  };

  return <>
      <Header />
      <div className="min-h-screen bg-gray-50">
        {/* Breadcrumb */}
        <div className="bg-white border-b border-gray-200">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
            <nav className="flex" aria-label="Breadcrumb">
              <ol className="flex items-center space-x-4">
                <li>
                  <div>
                    <a href="/" className="text-gray-400 hover:text-gray-500">
                      Home
                    </a>
                  </div>
                </li>
                <li>
                  <div className="flex items-center">
                    <ChevronRight className="flex-shrink-0 h-5 w-5 text-gray-400" />
                    <a href="/buying-guides" className="ml-4 text-gray-400 hover:text-gray-500">
                      Buying Guides
                    </a>
                  </div>
                </li>
                <li>
                  <div className="flex items-center">
                    <ChevronRight className="flex-shrink-0 h-5 w-5 text-gray-400" />
                    <span className="ml-4 text-sm font-medium text-gray-500">
                      {guide.title}
                    </span>
                  </div>
                </li>
              </ol>
            </nav>
          </div>
        </div>
        {/* Header section */}
        <div className="bg-white">
          <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div className="text-center">
              <div className="flex items-center justify-center space-x-4 text-sm text-gray-500 mb-4">
                <span className="bg-[#0e4c92] text-white px-3 py-1 rounded-full text-xs font-medium">
                  {guide.category}
                </span>
                <div className="flex items-center">
                  <Calendar className="h-4 w-4 mr-1" />
                  <span>{guide.date}</span>
                </div>
                <div className="flex items-center">
                  <Clock className="h-4 w-4 mr-1" />
                  <span>{guide.readTime}</span>
                </div>
              </div>
              <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
                {guide.title}
              </h1>
              <p className="text-lg text-gray-600 mb-6">
                {guide.summary}
              </p>
              <p className="text-sm text-gray-500">
                By <span className="font-medium">{guide.author}</span>
              </p>
              <div className="mt-6 flex justify-center">
                <button className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                  <Share2 className="h-4 w-4 mr-2" />
                  Share Guide
                </button>
              </div>
            </div>
          </div>
        </div>
        {/* Hero image */}
        <div className="w-full">
          <div className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
            <div className="aspect-w-16 aspect-h-9 rounded-xl overflow-hidden">
              <ImageWithLoading src={guide.heroImage} alt={guide.title} className="w-full h-full object-center object-cover" />
            </div>
          </div>
        </div>
        {/* Main content */}
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
          <div className="lg:grid lg:grid-cols-4 lg:gap-8">
            {/* Sidebar */}
            <div className="lg:col-span-1">
              <div className="sticky top-8">
                {/* Table of Contents */}
                <div className="bg-white border border-gray-200 rounded-lg p-6 mb-8">
                  <h2 className="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                    <List className="h-5 w-5 mr-2" />
                    Table of Contents
                  </h2>
                  <nav>
                    <ul className="space-y-2">
                      {guide.tableOfContents.map((item, index) => <li key={index}>
                          <a href={`#${item.id}`} className="text-sm text-gray-600 hover:text-[#0e4c92] block py-1">
                            {item.title}
                          </a>
                        </li>)}
                    </ul>
                  </nav>
                </div>
                {/* Recommended products sidebar */}
                <div className="mt-8 bg-[#f5f7fa] border border-gray-200 rounded-lg p-6">
                  <h2 className="text-lg font-semibold text-gray-900 mb-4">
                    Recommended Products
                  </h2>
                  <div className="space-y-4">
                    {guide.recommendedProducts.map((product, idx) => <a key={idx} href={product.link} className="block bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                        <div className="p-3">
                          <div className="aspect-w-3 aspect-h-2 rounded-lg overflow-hidden">
                            <ImageWithLoading src={product.image} alt={product.name} className="w-full h-full object-center object-cover" />
                          </div>
                          <h3 className="mt-2 text-sm font-medium text-gray-900">
                            {product.name}
                          </h3>
                          <p className="mt-1 text-sm text-[#0e4c92] font-semibold">
                            ${product.price}
                          </p>
                          <p className="mt-1 text-xs text-gray-500">
                            {product.description}
                          </p>
                        </div>
                      </a>)}
                  </div>
                </div>
              </div>
            </div>
            {/* Main content */}
            <div className="lg:col-span-3 mt-8 lg:mt-0">
              <div className="bg-white rounded-lg shadow-sm border border-gray-200">
                <div className="px-6 py-8">
                  <div className="prose prose-lg max-w-none">
                    {guide.content.map((block, index) => {
                      if (block.type === 'heading') {
                        const HeadingTag = `h${block.level}` as keyof JSX.IntrinsicElements;
                        return <HeadingTag key={index} id={block.id} className={`${block.level === 2 ? 'text-2xl font-bold text-gray-900 mt-8 mb-4' : 'text-xl font-semibold text-gray-900 mt-6 mb-3'}`}>
                            {block.content}
                          </HeadingTag>;
                      } else if (block.type === 'paragraph') {
                        return <p key={index} className="text-gray-700 mb-4 leading-relaxed">
                            {block.content}
                          </p>;
                      } else if (block.type === 'list') {
                        return <ul key={index} className="list-disc list-inside text-gray-700 mb-4 space-y-1">
                            {block.items?.map((item, itemIdx) => <li key={itemIdx} className="text-gray-700">
                                {item}
                              </li>)}
                          </ul>;
                      }
                      return null;
                    })}
                  </div>
                </div>
              </div>
              {/* Recommended Products */}
              <div className="mt-8 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h2 className="text-xl font-bold text-gray-900 mb-6">
                  Recommended Products
                </h2>
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  {guide.recommendedProducts.map((product, idx) => <a key={idx} href={product.link} className="block bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-shadow">
                      <div className="aspect-w-3 aspect-h-2">
                        <ImageWithLoading src={product.image} alt={product.name} className="w-full h-full object-center object-cover" />
                      </div>
                      <div className="p-4">
                        <h3 className="text-lg font-medium text-gray-900">
                          {product.name}
                        </h3>
                        <p className="mt-1 text-lg font-semibold text-[#0e4c92]">
                          ${product.price}
                        </p>
                        <p className="mt-2 text-sm text-gray-500">
                          {product.description}
                        </p>
                        <div className="mt-3 flex items-center text-sm text-[#0e4c92] font-medium">
                          <span>View Product</span>
                          <ExternalLink className="ml-1 h-4 w-4" />
                        </div>
                      </div>
                    </a>)}
                </div>
              </div>
              {/* Related Guides */}
              <div className="mt-8 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
                <h2 className="text-xl font-bold text-gray-900 mb-6">
                  Related Guides
                </h2>
                <div className="space-y-4">
                  {guide.relatedGuides.map((relatedGuide, idx) => <a key={idx} href={relatedGuide.link} className="block border border-gray-200 rounded-lg p-4 hover:bg-gray-50 transition-colors">
                      <div className="flex items-center justify-between">
                        <div>
                          <h3 className="text-lg font-medium text-gray-900">
                            {relatedGuide.title}
                          </h3>
                          <p className="text-sm text-gray-500">
                            {relatedGuide.readTime}
                          </p>
                        </div>
                        <ChevronRight className="h-5 w-5 text-gray-400" />
                      </div>
                    </a>)}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <Footer />
    </>;
};